import React, {
    Component
} from 'react';
import {Icon,Menu, Dropdown, Button} from "antd";
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import './Header.css';


class Header extends Component{
    constructor(props) {
        super(props);
        
        this.state = {
            isStudents:true
        }
    }
    componentDidMount(){
        let roleId=window.localStorage.getItem('roleId');
        if(roleId==1||roleId==2)
        {
            this.setState({
                isStudents:false
            })
        }else{
            this.setState({
                isStudents:true
            })
        }
    }
    

    render() {
        const students=<>
        <li><Link to={'/enroll'}>报名列表</Link></li>
        </>;
        const teachers=<>
        <li><Link to={'/enroll/auditList'}>报名审核</Link></li>
        <li><Link to={'/enroll/'}>招新列表</Link></li>
        </>;
        const menu = (
            this.state.isStudents?<Menu>
                <Menu.Item>
                    <Link to={'/enroll'}>
                        报名列表
                    </Link>
                </Menu.Item>
            </Menu>:<Menu>
                    <Menu.Item>
                        <Link to={'/enroll'}>
                            招新列表
                        </Link>
                    </Menu.Item>
                    <Menu.Item>
                    <Link to={'/enroll/auditList'}>
                            报名审核
                            </Link>
                    </Menu.Item>
                    <Menu.Item>
                        <a herf="http://acm.swust.edu.cn" >返回OJ</a>
                    </Menu.Item>
            </Menu>
        );

    
        return (
            <div className="header-wrap">
                <div className="header-logo">
                    <div className="header-logo-img">
                        
                    </div>
                    <div className="header-logo-text">西南科技大学计算机学院卓越班招新</div>
                </div>
                <div className="header-icon">
                    <Dropdown overlay={menu} placement="bottomCenter">
                        <Icon type="menu-unfold" />
                        </Dropdown>
                        </div>
                <nav className="header-nav">
                    <ul className="header-nav-list">
                        <li><a href="http://acm.swust.edu.cn" >返回OJ</a></li>
                        {
                            this.state.isStudents ? students : teachers
                        }
                        
                    </ul>
                </nav>
            </div>
        );
    }
}
export default  connect(()=>({}))(Header);